<template>
  <div class="">
    <Header></Header>
    <div class="h-5"></div>
    <div class="wrapper">
      <div class="toolbar flex justify-between px-3.5">
        <div class="flex items-center gap-3.5">
          <Checkbox :checked="isCheckedAll" @change="handleCheckedAll">
            <template #title> <span class="text-sm">全选</span></template>
          </Checkbox>
          <div class="pl-3">
            <el-button type="" size="">删除</el-button>
            <el-button type="" size="">移入收藏夹</el-button>
            <el-button type="">清理购物车</el-button>
          </div>
        </div>
        <div>
          <div class="flex items-center gap-1.5 bg-white px-2 py-1.5 text-sm box-shadow">
            <span class="text-red-500 font-600">降价</span>
            <span>购物车中有16件商品已降价，快去看看</span>
            <el-icon class="cursor-pointer" size="16" @click=""><Close /></el-icon>
          </div>
        </div>
        <div>
          <div class="pos-relative bg-white px-2 py-1.5">
            <div
              class="flex items-center text-sm cursor-pointer"
              @click.stop="handleAddressClick()"
            >
              <span class="pr-2 font-600">配送至</span>
              <div class="hover:text-red-5 flex items-center">
                <span class="pr-2 line-clamp-1" style="max-width: 120px"
                  >北京海淀区上地街道</span
                >
                <el-icon size="14"><ArrowDown /></el-icon>
              </div>
            </div>

            <Transition name="el-zoom-in-top">
              <FilterMenuDropdown
                :showDropdown="showAddressDropdown"
                :width="630"
                :offect="0"
                :right="15"
                @close="closeModals"
              >
                <template #default>
                  <AddressPanel @close="showAddressDropdown = false" />
                </template>
              </FilterMenuDropdown>
            </Transition>
          </div>
        </div>
      </div>
      <div class="h-5"></div>
      <div class="">
        <div
          v-for="(item, index) in 5"
          :key="item"
          class="border-rounded bg-white overflow-hidden"
        >
          <div class="flex items-center shop-box mt-5 px-3.5">
            <Checkbox :checked="isCheckedAll" @change="handleCheckedAll">
              <template #default>
                <div class="tags mr-2">
                  <span
                    class="bg-red text-3 text-white px-1 rounded-sm"
                    style="line-height: 20px"
                    >自营</span
                  >
                </div>
                <router-link to="/shop/123">
                  <span class="text-sm">零刻电脑办公旗舰店</span>
                </router-link>
              </template>
            </Checkbox>
            <div class="flex items-center ml-2 cursor-pointer">
              <el-icon color="#05acfa" size="16"><Shop /></el-icon>
            </div>
          </div>
          <div class="item-box px-3.5 py-5 flex items-start">
            <div class="" style="transform: translateY(35px)">
              <Checkbox :checked="isCheckedAll" @change="handleCheckedAll" />
            </div>
            <div class="ml-1.5 pos-relative" style="width: 85px; height: 85px">
              <router-link
                :to="``"
                target="_blank"
                class="border-rounded-2xl overflow-hidden block"
                @mouseenter="handleHoverPreview($event)"
                @mouseleave="showPreview = false"
              >
                <el-image
                  :src="`https://picsum.photos/id/677/200/200?v=${new Date()}`"
                  style="max-width: 100%; height: 100%"
                  lazy
              /></router-link>
            </div>
            <div class="ml-5 flex-1">
              <div class="text-sm font-600 flex">
                <h5 class="line-clamp-2">零刻电脑办公旗舰店</h5>
                <span class="text-red-500 font-600 ml-2">降价</span>
              </div>
              <!-- 版本 -->
              <div>
                <!-- 促销 -->
                <div></div>
              </div>
              <!-- 保价 -->
              <div></div>
              <!-- 服务 -->
              <div></div>
              <!-- 赠品 -->
              <div></div>
            </div>
            <div class="mr-2 w-1/8">
              <Price :price="100" size="default" />
              <div class="mt-3.5"><span class="text-red-500 text-sm">比加入时降3.9元</span></div>
            </div>
            <div>
              <el-input-number
                v-model="count"
                :min="1"
                :max="10"
                @change="handleChange(index)"
              />
            </div>
            <div
              class="flex items-end flex-col gap-1.5 w-1/8 justify-start cursor-pointer"
            >
              <span class="text-sm text-gray-400">移入收藏</span>
              <span class="text-sm text-gray-400 mt-3">删除</span>
            </div>
          </div>
        </div>
      </div>
      <div class="h-15"></div>
    </div>
  </div>
  <Transition name="fade-in-out">
    <div
      v-show="showPreview"
      class="pos-fixed top-0 bg-white text-black p-2.5 border-rounded-xl overflow-hidden shadow-lg"
      style="width: 300px; height: 300px"
      :style="previewStyle"
    >
      <el-image
        :src="productPreviewUrl"
        class="border-rounded-xl overflow-hidden"
        style="width: 100%; height: 100%"
      ></el-image>
    </div>
  </Transition>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed, nextTick } from "vue";

import AddressPanel from "@/components/ui/AddressPanel.vue";
import Price from "@/components/common/Price.vue";
import * as Api from "@/api/index";
import { Select, Close, ArrowDown, Shop } from "@element-plus/icons-vue";

import Header from "./components/Header.vue";
import FilterMenuDropdown from "@/components/ui/FilterMenuDropdown.vue";
import Checkbox from "@/components/ui/checkbox.vue";
// 模拟数据
import { productDetail } from "@/mock/data/product-detail";

const isCheckedAll = ref(false);
const handleCheckedAll = (checked: boolean) => {
  console.log("isCheckedAll", checked);
  isCheckedAll.value = checked;
};

const stickyElement = ref<HTMLDivElement | null>(null);
const isSticky = ref(false);

// 滚动到指定锚点
// const scrollToAnchor =async (ref: Ref<HTMLDivElement | null>) => {
//   await nextTick();
//   if (ref.value) {
//     ref.value.scrollIntoView({
//       behavior: "smooth", // 平滑滚动
//       block: "start", // 对齐到顶部
//     });
//   }
// };

// --地址选择模块
const showAddressDropdown = ref(false);
const handleAddressClick = () => {
  console.log("hover");
  showAddressDropdown.value = !showAddressDropdown.value;
};
const closeModals = () => {
  console.log("close");
  showAddressDropdown.value = false;
};

// --商品图片预览
const showPreview = ref(false);
const productPreviewUrl = ref("");
const PreviewX = ref(0);
const PreviewY = ref(0);
const previewStyle = computed(() => {
  return {
    left: `${PreviewX.value}px`,
    top: `${PreviewY.value}px`,
  };
});
const handleHoverPreview = (e: MouseEvent) => {
  console.log(e);
  const element = e.currentTarget as HTMLElement;
  const rect = element.getBoundingClientRect();
  console.log(rect.x, rect.y);
  PreviewX.value = rect.x + rect.width + 25;
  PreviewY.value = rect.y - rect.height;
  productPreviewUrl.value = "https://picsum.photos/id/677/200/200?v=10";
  console.log("hover");
  showPreview.value = true;
};

const count = ref(1);
const handleChange = (index: number) => {};
onMounted(async () => {
  window.scrollTo({
    top: 0,
    behavior: "instant",
  });
});
onUnmounted(() => {});
</script>
<style lang="scss">
$height: 15px;
body {
  background: var(--bg-base-color);
}
footer {
  background-color: #fff;
}
.sticky-element {
  position: sticky; /* 声明为粘性定位 */
  top: $height; /* 距离视口顶部的阈值（触发固定的临界值） */
  z-index: 10;
  /* 可选：bottom/right/left 用于其他方向的固定 */
}
.is-sticky {
  position: fixed;
  top: $height;
  width: auto;
  z-index: 10;
  /* 可以添加一些吸附后的样式 */
  background-color: #fff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
}
.is-sticky-bottom {
  position: absolute;
  bottom: 0;
  top: auto;
  width: auto;
  z-index: 1000;
  /* 可以添加一些吸附后的样式 */
  background-color: #fff;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
}
</style>
